<!-- campo dentro formulario -->
<div class="crudField crud_text">
	<label for="TipoEvento"> Tipo de Evento </label>
	<select id="tipoEvento" name="object.tipoEvento.id">
		<option value="">&{'crud.none'}</option> 
		#{list items:_tipoEventos,	as:'tipoEvento'}
			<option value="${tipoEvento.id}" #{if (_field!=null && _field.tipoEvento!=null && tipoEvento.id.equals(_field.tipoEvento.id))} selected #{/if}>
			${tipoEvento.nombre}
			</option>
		#{/list}
	</select>  
	<img id="searchTipoEvento" src="/public/images/Add.png" alt="Add">
</div>

<!-- dialogo para busqueda de entidad -->
<div id="dialog-search-tipoEventos"  style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Tipo de Evento'}
		<input type="text" id="tipoEventoSearch" name="tipoEventoSearch">
		<img id="addTipoEvento" src="/public/images/Add.png" alt="Add">
		</h2>
		<div class="objectForm">
			<div class="crudField crud_text" id="tipoEventosDiv">
				<table id="tipoeventosTable">			
					#{list items:_tipoEventos, as:'tipoEvento'}				
						<tr><td><a href="#" onclick='selectAndCloseTipoEventoDialogs("${tipoEvento.id}");' class="tipoEvento" >${tipoEvento.nombre}</a></td></tr>
					#{/list}
				</table>
			</div>
		</div>	
</div> 

<!-- dialogo para alta de nueva entidad -->
<div id="dialog-add-tipoEvento"  class="dialogTipoEvento" style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Tipo de Evento'}</h2>
		<div class="objectForm">
			<div class="crudField crud_text" style="height: 50px;">
				<label for="object_descripcion" >
	        		nombre
	    		</label>
	    		<input id="tipoEvento_nombre" type="text" name="tipoEvento.nombre" value="" style="float: right;" size="40">			    
			</div>
		</div>
		<input type="submit" name="_save" value="&{'crud.save'}" style="margin-top: 10px;" onclick="saveTipoEvento();"/>	
</div>

<script type="text/javascript">

$().ready(function() {
	
	$( "#dialog-search-tipoEventos").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#dialog-add-tipoEvento").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#searchTipoEvento" ).click(function() {
		$( "#dialog-search-tipoEventos" ).dialog( "open" );
		return false;
	});
	$( "#addTipoEvento" ).click(function() {
		$( "#dialog-add-tipoEvento" ).dialog( "open" );
		return false;
	});
	
	$("#tipoEventoSearch").keyup(function() {
		  searchTipoEventos();
	});
});

/* esta funcion busca las entidades segun el criterio de busqueda */
function searchTipoEventos(){
	$.get("/TipoEventos/search",  {
		nombre: $("#tipoEventoSearch").val()
	},function(data, id){
		if(data[0] != 'ERROR'){
			$("#tipoeventosTable").remove();
			var tipoEventos = JSON.parse(data[1]);
			var i = 0;
			html = "<table id='tipoeventosTable'>";
			for(i = 0; i < tipoEventos.length; i++) {
				html = html + 
				'<tr><td><a href="#" onclick="selectAndCloseTipoEventoDialogs('+tipoEventos[i].id+');" class="tipoEvento" >'+tipoEventos[i].nombre+'</a></td></tr>';				
			}
			html = html + "</table>";
			$("#tipoEventosDiv").append(html);
			return false;
		} else {
			return false;
		}
		
	},'json');
}

/* esta funcion guarda la nueva entidad en la base de datos y la setea en el campo del formulario */
function saveTipoEvento() {
	valor = $('#tipoEvento_nombre').val();
	
	$.get("/TipoEventos/create",  {
		valor: valor
	},function(data){
		if(data[0] != 'ERROR'){
			saveAndCloseTipoEventoDialogs(data[1], valor);
		}else {
			alert(data[1]);
		}
		
	},'json');
	
}

/* esta funcion agrega el nuevo campo en el formulario y cierra los dialogs */
function saveAndCloseTipoEventoDialogs(id, valor){
	
	$("#tipoEvento").append('<option value=' + id + ' selected>' + valor +'</option>');
	
	closeTipoEventoDialogs();
}

/* esta funcion setea el campo seleccionado en el formulario y cierra los dialogs */
function selectAndCloseTipoEventoDialogs(id){
			
	$("#tipoEvento option[value='"+id+"']").prop('selected', true);
	
	closeTipoEventoDialogs();
}

function closeTipoEventoDialogs(){
	$('#tipoEventoSearch').val("");
	$('#tipoEvento_nombre').val("");
	$("#dialog-add-tipoEvento").dialog( "close" );
	$("#dialog-search-tipoEventos").dialog( "close" );
}
</script>